<script setup lang="ts">
import {ref,reactive} from "vue";
import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5';
import {FormInst,useMessage} from "naive-ui";
import {useStore} from "../../store/user";
import{useRouter} from "vue-router";

interface FormState {
    email:string;
    password:string
}
const uStore = useStore()
const router = useRouter()
const message = useMessage()
window.$message =useMessage()

const formRef = ref<FormInst | null>(null)
const loading =ref(false)
const formValue = reactive<any>({
    username:'super@a.com',
    password:'123123'
})
const messages = ref<any>({
    required:'women'
})

const rules = {
    username:{required:true,message:'请输入用户名',trigger:'blur'},
    password:{required:true,message:'请输入密码',trigger:'blur'}
}

// 点击登录之后的方法
const login = (e:Event) => {
    e.preventDefault();// 禁止父级的事件
    // 表单验证
    formRef.value?.validate(async (error:any) =>{
        // 当验证不通过，有error的时候直接结束程序，并抛出error
        if (error){
            return
        }
        // 接受数据
        const {username,password} = formValue

        // 显示加载状态
        loading.value = true

        // 调整数据结构
        const data:FormState = {
            email: username,
            password:password
        }


        // 执行登陆操作
        uStore.login(data).then(res => {
            loading.value = false
            message.success('登录成功')
            router.push({name:'dashboard'})

        }).catch(err => {
            loading.value = false
            // Upload.error('登录失败')
        })


    })
}

</script>

<template>
    <div class="background">
       <div class="logo">
           <img src="@/assets/imags/logo.png">
       </div>
        <div class="form">
            <n-form
                    ref="formRef"
                    :model="formValue"
                    :rules="rules"
                    :validate-messages="messages"
                    class="n-form"
            >
                <n-form-item  path="username" class="username" >
                    <n-input type="text" v-model:value="formValue.username" placeholder="请输入用户名" >
                        <template #prefix>
                            <n-icon size="18" color="#808695">
                                <PersonOutline />

                            </n-icon>
                        </template>
                    </n-input>
                </n-form-item>
                <n-form-item  path="password " class="password">
                    <n-input type="password" v-model:value="formValue.password" placeholder="请输入密码" >
                        <template #prefix>
                            <n-icon size="18" color="#808695">
                                <LockClosedOutline />

                            </n-icon>
                        </template>
                    </n-input>
                </n-form-item>
                <n-form-item>

                        <n-button class="btn" type="success" @click="login" :loading="loading">
                           登陆
                        </n-button>

                </n-form-item>
            </n-form>

        </div>
    </div>
</template>

<style scoped lang="less">
.background{
  width: 100%;
  height: 100%;

  .logo{
    margin-top: 50px;
    img{
      margin:0 auto;
    }
  }
  .form{
    width: 100%;
    height: 80%;

    .n-form{
      width: 50%;
      height: 80%;
      margin: 0 auto;
      .username{
        text-align: left;
        width: 60%;
        height: 50%;
        margin: 0 auto;

      }
      .password{
        text-align: left;
        width: 60%;
        height: 50%;
        margin: -30px auto;

      }
      .btn{
        width: 60%;
        height: 100%;
        margin: 0 auto;
        //background: #18A058;

      }
    }
  }
}

</style>